// 加载骨架屏组件

export function CardSkeleton() {
  return (
    <div className="glass-effect-dark rounded-2xl p-6 border border-white/10 animate-pulse">
      <div className="flex items-center space-x-3 mb-6">
        <div className="w-8 h-8 bg-white/10 rounded-lg"></div>
        <div className="h-6 bg-white/10 rounded w-32"></div>
      </div>
      
      <div className="space-y-4">
        <div className="h-40 bg-white/5 rounded-xl"></div>
        <div className="h-4 bg-white/10 rounded w-3/4"></div>
        <div className="h-4 bg-white/10 rounded w-1/2"></div>
      </div>
    </div>
  )
}

export function ModelViewerSkeleton() {
  return (
    <div className="glass-effect-dark rounded-2xl p-6 border border-white/10">
      <div className="flex items-center justify-between mb-6">
        <div className="h-6 bg-white/10 rounded w-32 animate-pulse"></div>
        <div className="flex space-x-2">
          <div className="w-20 h-8 bg-white/10 rounded-lg animate-pulse"></div>
          <div className="w-20 h-8 bg-white/10 rounded-lg animate-pulse"></div>
        </div>
      </div>
      
      <div className="relative bg-gradient-to-br from-dark-300/50 to-dark-400/50 rounded-xl overflow-hidden border border-white/5 flex items-center justify-center" style={{ height: '500px' }}>
        <div className="flex flex-col items-center space-y-4">
          <div className="w-20 h-20 border-4 border-white/10 border-t-accent-purple rounded-full animate-spin"></div>
          <p className="text-gray-400 animate-pulse">加载中...</p>
        </div>
      </div>
    </div>
  )
}

export function ImageUploadSkeleton() {
  return (
    <div className="glass-effect-dark rounded-2xl p-6 border border-white/10 animate-pulse">
      <div className="flex items-center space-x-3 mb-6">
        <div className="w-8 h-8 bg-white/10 rounded-lg"></div>
        <div className="h-6 bg-white/10 rounded w-40"></div>
      </div>
      
      <div className="border-2 border-dashed border-white/20 rounded-2xl p-12">
        <div className="flex flex-col items-center space-y-4">
          <div className="w-16 h-16 bg-white/10 rounded-full"></div>
          <div className="h-4 bg-white/10 rounded w-48"></div>
          <div className="h-3 bg-white/10 rounded w-32"></div>
        </div>
      </div>
    </div>
  )
}

